import React, { Component, Fragment } from "react";
import "./index.css";

const MyContext = React.createContext();
const { Provider, Consumer } = MyContext;

export default class A extends Component {
  state = { username: "tom", age: 18 };

  render() {
    const { username, age } = this.state;
    return (
      <div className="parent">
        <h3>我是A组建</h3>
        <h3>我的用户名是：{username}</h3>
        <Provider value={{ username, age }}>
          <B />
        </Provider>
      </div>
    );
  }
}

class B extends Component {
  render() {
    return (
      <div className="child">
        <h3>我是B组建</h3>
        <C />
      </div>
    );
  }
}

// class C extends Component {
//     static contextType =  MyContext
//     render() {
//       const {username,age} = this.context
//     return (
//       <div className="grand">
//         <h3>我是C组建</h3>
//         <h3>我从A接受到的用户名是：{username},年龄是：{age}</h3>
//       </div>
//     );
//   }
// }

function C() {
  return (
    <div className="grand">
      <h3>我是C组建</h3>
      <h3>
        我从A接受到的用户名是：
        <Consumer>
          { value=> `${value.username},年龄是：${value.age}`}
        </Consumer>
      </h3>
    </div>
  );
}
